<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI股票监控平台</title>
    <style>
        :root {
            --dark-bg: #121826;
            --panel-bg: #1e293b;
            --panel-border: #334155;
            --primary: #2563eb;
            --primary-hover: #3b82f6;
            --positive: #10b981;
            --negative: #ef4444;
            --warning: #f59e0b;
            --text-primary: #f1f5f9;
            --text-secondary: #94a3b8;
            --grid-line: #334155;
            --chart-bg: #0f172a;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background-color: var(--dark-bg);
            color: var(--text-primary);
            overflow: hidden;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        /* 页面布局 */
        .container {
            display: grid;
            grid-template-rows: 80px 1fr 200px;
            grid-template-columns: 1fr;
            height: 100vh;
            max-width: 1920px;
            margin: 0 auto;
            padding: 10px;
            gap: 10px;
        }
        
        /* 页眉样式 */
        header {
            background: var(--panel-bg);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            border: 1px solid var(--panel-border);
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .logo-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, var(--primary), #7c3aed);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .logo-text {
            font-size: 24px;
            font-weight: 700;
        }
        
        .logo-text span {
            color: var(--primary);
        }
        
        .market-status {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        .status-indicator {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .status-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--positive);
        }
        
        .status-dot.closed {
            background-color: var(--negative);
        }
        
        .datetime {
            font-size: 18px;
            font-weight: 500;
        }
        
        /* 主内容区 */
        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 10px;
        }
        
        .panel {
            background: var(--panel-bg);
            border-radius: 10px;
            border: 1px solid var(--panel-border);
            padding: 15px;
            position: relative;
            overflow: hidden;
        }
        
        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--panel-border);
        }
        
        .panel-title {
            font-size: 18px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .panel-controls {
            display: flex;
            gap: 10px;
        }
        
        .btn {
            background: var(--dark-bg);
            border: 1px solid var(--panel-border);
            color: var(--text-primary);
            padding: 6px 12px;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }
        
        .btn:hover {
            background: var(--primary);
            border-color: var(--primary);
        }
        
        /* 热力图样式 */
        #heatmap-container {
            grid-column: 1 / 3;
            height: 300px;
        }
        
        .heatmap {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: repeat(3, 1fr);
            gap: 8px;
            height: 100%;
        }
        
        .sector {
            background: var(--chart-bg);
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 10px;
            transition: all 0.2s;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        
        .sector:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }
        
        .sector-name {
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .sector-change {
            font-size: 16px;
            font-weight: 700;
        }
        
        /* 图表容器 */
        .chart-container {
            position: relative;
            height: calc(100% - 40px);
            width: 100%;
        }
        
        canvas {
            width: 100%;
            height: 100%;
        }
        
        /* K线图样式 */
        #candlestick-chart {
            grid-column: 1;
            grid-row: 2;
        }
        
        /* 实时数据监控 */
        #real-time-monitor {
            grid-column: 2;
            grid-row: 2;
        }
        
        .stocks-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            height: 100%;
        }
        
        .stock-card {
            background: var(--chart-bg);
            border-radius: 8px;
            padding: 15px;
            display: flex;
            flex-direction: column;
            border: 1px solid var(--panel-border);
        }
        
        .stock-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .stock-symbol {
            font-size: 18px;
            font-weight: 700;
        }
        
        .stock-price {
            font-size: 20px;
            font-weight: 700;
        }
        
        .price-up {
            color: var(--positive);
        }
        
        .price-down {
            color: var(--negative);
        }
        
        .stock-change {
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .stock-metrics {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 10px;
        }
        
        .metric {
            display: flex;
            flex-direction: column;
        }
        
        .metric-label {
            font-size: 12px;
            color: var(--text-secondary);
            margin-bottom: 3px;
        }
        
        .metric-value {
            font-size: 14px;
            font-weight: 500;
        }
        
        /* AI预测模块 */
        #ai-predictions {
            grid-column: 1;
            grid-row: 3;
        }
        
        .prediction-container {
            display: flex;
            height: calc(100% - 40px);
            gap: 15px;
        }
        
        .prediction-chart {
            flex: 1;
            position: relative;
        }
        
        .prediction-info {
            width: 250px;
            background: var(--chart-bg);
            border-radius: 8px;
            padding: 15px;
            border: 1px solid var(--panel-border);
        }
        
        /* 预警面板 */
        #alerts-panel {
            grid-column: 2;
            grid-row: 3;
        }
        
        .alerts-container {
            height: calc(100% - 40px);
            overflow-y: auto;
        }
        
        .alert-item {
            background: var(--chart-bg);
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 10px;
            border-left: 4px solid var(--warning);
            display: flex;
            justify-content: space-between;
            align-items: center;
            animation: fadeIn 0.5s ease;
        }
        
        .alert-item.critical {
            border-left-color: var(--negative);
            background: rgba(239, 68, 68, 0.1);
        }
        
        .alert-item.info {
            border-left-color: var(--primary);
        }
        
        .alert-content {
            flex: 1;
        }
        
        .alert-title {
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .alert-desc {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .alert-time {
            font-size: 12px;
            color: var(--text-secondary);
            margin-left: 10px;
        }
        
        /* 操作区 */
        .operations {
            background: var(--panel-bg);
            border-radius: 10px;
            padding: 15px;
            display: flex;
            align-items: center;
            border: 1px solid var(--panel-border);
        }
        
        .search-container {
            display: flex;
            align-items: center;
            background: var(--dark-bg);
            border-radius: 8px;
            padding: 0 15px;
            border: 1px solid var(--panel-border);
            flex: 1;
            margin-right: 20px;
        }
        
        .search-container input {
            background: transparent;
            border: none;
            padding: 12px;
            color: var(--text-primary);
            font-size: 16px;
            width: 100%;
            outline: none;
        }
        
        .controls {
            display: flex;
            gap: 15px;
            align-items: center;
        }
        
        .control-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .control-label {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        select {
            background: var(--dark-bg);
            border: 1px solid var(--panel-border);
            color: var(--text-primary);
            padding: 8px 12px;
            border-radius: 6px;
            outline: none;
        }
        
        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .pulse {
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 0.6; }
            50% { opacity: 1; }
            100% { opacity: 0.6; }
        }
        
        /* 响应式调整 */
        @media (max-width: 1200px) {
            .container {
                grid-template-rows: 80px auto auto 200px;
            }
            
            .main-content {
                grid-template-columns: 1fr;
                grid-template-rows: repeat(4, auto);
            }
            
            #heatmap-container {
                grid-column: 1;
            }
            
            #candlestick-chart {
                grid-column: 1;
                grid-row: 2;
            }
            
            #real-time-monitor {
                grid-column: 1;
                grid-row: 3;
            }
            
            #ai-predictions {
                grid-column: 1;
                grid-row: 4;
            }
            
            #alerts-panel {
                grid-column: 1;
                grid-row: 5;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 页眉 -->
        <header>
            <div class="logo">
                <div class="logo-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M3 11L12 2L21 11V22H3V11Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M9 22V12H15V22" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
                <div class="logo-text">AI<span>StockInsight</span></div>
            </div>
            <div class="market-status">
                <div class="status-indicator">
                    <div class="status-dot"></div>
                    <span>市场交易中</span>
                </div>
                <div class="datetime" id="datetime">2023年10月15日 14:30:45</div>
            </div>
        </header>
        
        <!-- 主内容区 -->
        <div class="main-content">
            <!-- 热力图 -->
            <div class="panel" id="heatmap-container">
                <div class="panel-header">
                    <div class="panel-title">行业板块热力图</div>
                    <div class="panel-controls">
                        <button class="btn">行业</button>
                        <button class="btn">概念</button>
                        <button class="btn">地域</button>
                    </div>
                </div>
                <div class="heatmap" id="heatmap"></div>
            </div>
            
            <!-- K线图 -->
            <div class="panel" id="candlestick-chart">
                <div class="panel-header">
                    <div class="panel-title">AAPL - 苹果公司 (NASDAQ)</div>
                    <div class="panel-controls">
                        <button class="btn">1D</button>
                        <button class="btn">1W</button>
                        <button class="btn active">1M</button>
                        <button class="btn">3M</button>
                        <button class="btn">1Y</button>
                        <select>
                            <option>MA</option>
                            <option>MACD</option>
                            <option>RSI</option>
                            <option>BOLL</option>
                        </select>
                    </div>
                </div>
                <div class="chart-container">
                    <canvas id="stock-chart"></canvas>
                </div>
            </div>
            
            <!-- 实时数据监控 -->
            <div class="panel" id="real-time-monitor">
                <div class="panel-header">
                    <div class="panel-title">实时股票监控</div>
                    <div class="panel-controls">
                        <button class="btn">添加股票</button>
                    </div>
                </div>
                <div class="stocks-grid">
                    <!-- 股票卡片将通过JS生成 -->
                </div>
            </div>
            
            <!-- AI预测分析 -->
            <div class="panel" id="ai-predictions">
                <div class="panel-header">
                    <div class="panel-title">AI预测分析</div>
                    <div class="panel-controls">
                        <button class="btn">1小时</button>
                        <button class="btn active">1日</button>
                        <button class="btn">1周</button>
                    </div>
                </div>
                <div class="prediction-container">
                    <div class="prediction-chart">
                        <canvas id="prediction-chart"></canvas>
                    </div>
                    <div class="prediction-info">
                        <h3>AAPL 预测分析</h3>
                        <p style="margin: 15px 0; color: var(--text-secondary);">AI模型基于历史数据和实时市场信息预测未来走势</p>
                        <div class="metric">
                            <div class="metric-label">明日预测价格区间</div>
                            <div class="metric-value" style="color: var(--positive);">$173.50 - $178.20</div>
                        </div>
                        <div class="metric" style="margin-top: 10px;">
                            <div class="metric-label">置信度</div>
                            <div class="metric-value">86%</div>
                        </div>
                        <div class="metric" style="margin-top: 10px;">
                            <div class="metric-label">关键影响因素</div>
                            <ul style="margin-top: 5px; padding-left: 20px; color: var(--text-secondary); font-size: 14px;">
                                <li>供应链改善</li>
                                <li>iPhone 15需求强劲</li>
                                <li>大盘科技股反弹</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- AI预警面板 -->
            <div class="panel" id="alerts-panel">
                <div class="panel-header">
                    <div class="panel-title">AI风险预警</div>
                    <div class="panel-controls">
                        <button class="btn">全部</button>
                        <button class="btn">高</button>
                        <button class="btn">中</button>
                        <button class="btn">低</button>
                    </div>
                </div>
                <div class="alerts-container" id="alerts-container">
                    <!-- 预警项将通过JS生成 -->
                </div>
            </div>
        </div>
        
        <!-- 操作区 -->
        <div class="operations">
            <div class="search-container">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-right: 10px;">
                    <path d="M19 19L13 13M15 8C15 11.866 11.866 15 8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8Z" stroke="#94A3B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
                <input type="text" placeholder="输入股票代码或名称..." id="stock-search">
            </div>
            <div class="controls">
                <div class="control-group">
                    <span class="control-label">刷新频率</span>
                    <select id="refresh-rate">
                        <option value="1">1秒</option>
                        <option value="5" selected>5秒</option>
                        <option value="15">15秒</option>
                        <option value="30">30秒</option>
                        <option value="60">1分钟</option>
                    </select>
                </div>
                <div class="control-group">
                    <span class="control-label">主题</span>
                    <select id="theme-select">
                        <option value="dark">深色模式</option>
                        <option value="light">浅色模式</option>
                    </select>
                </div>
                <button class="btn">保存布局</button>
                <button class="btn">导出数据</button>
            </div>
        </div>
    </div>

    <script>
        // 更新日期时间
        function updateDateTime() {
            const now = new Date();
            const options = { 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit',
                hour12: false
            };
            document.getElementById('datetime').textContent = now.toLocaleDateString('zh-CN', options);
        }
        
        // 初始化日期时间
        updateDateTime();
        setInterval(updateDateTime, 1000);
        
        // 生成热力图数据
        function generateHeatmapData() {
            const sectors = [
                { name: '信息技术', change: 1.8 },
                { name: '金融', change: -0.5 },
                { name: '医疗保健', change: 0.7 },
                { name: '消费品', change: -1.2 },
                { name: '工业', change: 2.1 },
                { name: '能源', change: -3.4 },
                { name: '公用事业', change: 0.3 },
                { name: '房地产', change: 1.5 },
                { name: '材料', change: -0.8 },
                { name: '通信服务', change: 2.5 },
                { name: '半导体', change: 3.2 },
                { name: '人工智能', change: 4.5 },
                { name: '新能源车', change: -2.1 },
                { name: '生物科技', change: 1.2 },
                { name: '云计算', change: 2.8 },
                { name: '电子商务', change: -1.7 },
                { name: '5G', change: 0.9 },
                { name: '消费电子', change: -0.4 },
                { name: '银行', change: -1.1 },
                { name: '保险', change: 0.6 },
                { name: '券商', change: 1.9 },
                { name: '医药', change: 0.4 },
                { name: '白酒', change: -2.3 },
                { name: '食品饮料', change: 0.2 },
                { name: '零售', change: -0.9 },
                { name: '制造业', change: 1.3 },
                { name: '交通运输', change: -0.7 },
                { name: '石油', change: -4.2 },
                { name: '电力', change: 0.8 },
                { name: '基建', change: 1.1 }
            ];
            
            const heatmap = document.getElementById('heatmap');
            heatmap.innerHTML = '';
            
            // 随机选择10个板块
            const selectedSectors = [];
            const indices = new Set();
            while(indices.size < 10) {
                indices.add(Math.floor(Math.random() * sectors.length));
            }
            
            indices.forEach(index => {
                selectedSectors.push(sectors[index]);
            });
            
            // 渲染板块
            selectedSectors.forEach(sector => {
                const sectorEl = document.createElement('div');
                sectorEl.className = 'sector';
                
                // 根据涨跌幅设置背景色
                const change = sector.change;
                let bgColor = 'rgba(16, 185, 129, 0.1)';
                let borderColor = 'rgba(16, 185, 129, 0.3)';
                
                if(change < 0) {
                    bgColor = 'rgba(239, 68, 68, 0.1)';
                    borderColor = 'rgba(239, 68, 68, 0.3)';
                } else if(change === 0) {
                    bgColor = 'rgba(148, 163, 184, 0.1)';
                    borderColor = 'rgba(148, 163, 184, 0.3)';
                }
                
                // 强度与涨跌幅绝对值相关
                const intensity = Math.min(0.2 + Math.abs(change)/15, 0.8);
                bgColor = bgColor.replace('0.1', intensity);
                
                sectorEl.style.background = bgColor;
                sectorEl.style.border = `1px solid ${borderColor}`;
                
                sectorEl.innerHTML = `
                    <div class="sector-name">${sector.name}</div>
                    <div class="sector-change" style="color: ${change >= 0 ? 'var(--positive)' : 'var(--negative)'}">
                        ${change >= 0 ? '+' : ''}${change.toFixed(2)}%
                    </div>
                `;
                
                heatmap.appendChild(sectorEl);
            });
        }
        
        // 生成股票卡片
        function generateStockCards() {
            const stocks = [
                { symbol: 'AAPL', name: '苹果公司', price: 175.42, change: 1.24, open: 174.20, high: 176.15, low: 173.80, volume: '28.3M', pe: 29.3 },
                { symbol: 'MSFT', name: '微软公司', price: 337.87, change: 0.78, open: 336.50, high: 339.20, low: 335.10, volume: '18.7M', pe: 35.2 },
                { symbol: 'GOOGL', name: '谷歌', price: 138.25, change: -0.32, open: 138.90, high: 139.40, low: 137.60, volume: '15.2M', pe: 24.8 },
                { symbol: 'AMZN', name: '亚马逊', price: 135.75, change: 2.15, open: 133.20, high: 136.40, low: 132.80, volume: '32.1M', pe: 60.1 }
            ];
            
            const container = document.querySelector('.stocks-grid');
            container.innerHTML = '';
            
            stocks.forEach(stock => {
                const card = document.createElement('div');
                card.className = 'stock-card';
                
                const changeClass = stock.change >= 0 ? 'price-up' : 'price-down';
                const changeIcon = stock.change >= 0 ? '↑' : '↓';
                
                card.innerHTML = `
                    <div class="stock-header">
                        <div>
                            <div class="stock-symbol">${stock.symbol}</div>
                            <div style="font-size: 12px; color: var(--text-secondary);">${stock.name}</div>
                        </div>
                        <div class="stock-price ${changeClass}">$${stock.price.toFixed(2)}</div>
                    </div>
                    <div class="stock-change ${changeClass}">${changeIcon} ${Math.abs(stock.change).toFixed(2)}%</div>
                    <div class="stock-metrics">
                        <div class="metric">
                            <div class="metric-label">今开</div>
                            <div class="metric-value">$${stock.open.toFixed(2)}</div>
                        </div>
                        <div class="metric">
                            <div class="metric-label">最高</div>
                            <div class="metric-value">$${stock.high.toFixed(2)}</div>
                        </div>
                        <div class="metric">
                            <div class="metric-label">最低</div>
                            <div class="metric-value">$${stock.low.toFixed(2)}</div>
                        </div>
                        <div class="metric">
                            <div class="metric-label">成交量</div>
                            <div class="metric-value">${stock.volume}</div>
                        </div>
                        <div class="metric">
                            <div class="metric-label">市盈率</div>
                            <div class="metric-value">${stock.pe}</div>
                        </div>
                        <div class="metric">
                            <div class="metric-label">市值</div>
                            <div class="metric-value">${(stock.price > 300 ? '2.5T' : '1.8T')}</div>
                        </div>
                    </div>
                `;
                
                container.appendChild(card);
            });
        }
        
        // 生成预警数据
        function generateAlerts() {
            const alerts = [
                { 
                    title: '异常成交量', 
                    desc: 'AAPL 成交量激增320%，超出历史平均水平', 
                    time: '2分钟前',
                    level: 'critical'
                },
                { 
                    title: '技术指标突破', 
                    desc: 'MSFT RSI突破70，进入超买区域', 
                    time: '15分钟前',
                    level: 'warning'
                },
                { 
                    title: '重大新闻事件', 
                    desc: '美联储宣布利率保持不变，符合市场预期', 
                    time: '28分钟前',
                    level: 'info'
                },
                { 
                    title: '板块资金流入', 
                    desc: '科技板块主力资金净流入85亿，连续3日流入', 
                    time: '45分钟前',
                    level: 'info'
                },
                { 
                    title: '分析师评级调整', 
                    desc: '高盛将AMZN评级从中性上调至买入，目标价$150', 
                    time: '1小时前',
                    level: 'info'
                }
            ];
            
            const container = document.getElementById('alerts-container');
            container.innerHTML = '';
            
            alerts.forEach(alert => {
                const alertEl = document.createElement('div');
                alertEl.className = `alert-item ${alert.level}`;
                
                alertEl.innerHTML = `
                    <div class="alert-content">
                        <div class="alert-title">${alert.title}</div>
                        <div class="alert-desc">${alert.desc}</div>
                    </div>
                    <div class="alert-time">${alert.time}</div>
                `;
                
                container.appendChild(alertEl);
            });
        }
        
        // 绘制K线图
        function drawCandlestickChart() {
            const canvas = document.getElementById('stock-chart');
            const ctx = canvas.getContext('2d');
            
            // 设置Canvas尺寸
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
            
            const width = canvas.width;
            const height = canvas.height;
            const padding = 40;
            const chartWidth = width - padding * 2;
            const chartHeight = height - padding * 2;
            
            // 清除画布
            ctx.clearRect(0, 0, width, height);
            
            // 绘制背景
            ctx.fillStyle = 'var(--chart-bg)';
            ctx.fillRect(0, 0, width, height);
            
            // 绘制网格
            ctx.strokeStyle = 'var(--grid-line)';
            ctx.lineWidth = 1;
            
            // 水平网格线
            const horizontalLines = 6;
            for (let i = 0; i <= horizontalLines; i++) {
                const y = padding + i * (chartHeight / horizontalLines);
                ctx.beginPath();
                ctx.moveTo(padding, y);
                ctx.lineTo(width - padding, y);
                ctx.stroke();
            }
            
            // 垂直网格线
            const verticalLines = 10;
            for (let i = 0; i <= verticalLines; i++) {
                const x = padding + i * (chartWidth / verticalLines);
                ctx.beginPath();
                ctx.moveTo(x, padding);
                ctx.lineTo(x, height - padding);
                ctx.stroke();
            }
            
            // 生成模拟K线数据
            const data = [];
            let currentPrice = 170;
            for (let i = 0; i < 30; i++) {
                const open = currentPrice;
                const change = (Math.random() - 0.5) * 4;
                const close = open + change;
                const high = Math.max(open, close) + Math.random() * 2;
                const low = Math.min(open, close) - Math.random() * 2;
                
                data.push({ open, high, low, close });
                currentPrice = close;
            }
            
            // 找出价格范围
            let minPrice = Number.MAX_VALUE;
            let maxPrice = Number.MIN_VALUE;
            
            data.forEach(d => {
                if (d.low < minPrice) minPrice = d.low;
                if (d.high > maxPrice) maxPrice = d.high;
            });
            
            // 添加一些空间
            const priceRange = maxPrice - minPrice;
            minPrice -= priceRange * 0.1;
            maxPrice += priceRange * 0.1;
            
            // 绘制K线
            const barWidth = chartWidth / data.length * 0.7;
            const barSpacing = chartWidth / data.length * 0.3;
            
            data.forEach((d, i) => {
                const x = padding + i * (barWidth + barSpacing) + barSpacing/2;
                
                // 计算坐标
                const yOpen = padding + chartHeight - ((d.open - minPrice) / (maxPrice - minPrice)) * chartHeight;
                const yClose = padding + chartHeight - ((d.close - minPrice) / (maxPrice - minPrice)) * chartHeight;
                const yHigh = padding + chartHeight - ((d.high - minPrice) / (maxPrice - minPrice)) * chartHeight;
                const yLow = padding + chartHeight - ((d.low - minPrice) / (maxPrice - minPrice)) * chartHeight;
                
                // 绘制垂直线（最高-最低）
                ctx.strokeStyle = d.close >= d.open ? 'var(--positive)' : 'var(--negative)';
                ctx.lineWidth = 1;
                ctx.beginPath();
                ctx.moveTo(x + barWidth/2, yHigh);
                ctx.lineTo(x + barWidth/2, yLow);
                ctx.stroke();
                
                // 绘制实体
                ctx.fillStyle = d.close >= d.open ? 'var(--positive)' : 'var(--negative)';
                const yTop = Math.min(yOpen, yClose);
                const barHeight = Math.abs(yOpen - yClose);
                ctx.fillRect(x, yTop, barWidth, barHeight);
            });
            
            // 绘制价格标签
            ctx.fillStyle = 'var(--text-primary)';
            ctx.font = '12px sans-serif';
            ctx.textAlign = 'right';
            ctx.fillText(maxPrice.toFixed(2), padding - 5, padding + 10);
            ctx.fillText(minPrice.toFixed(2), padding - 5, height - padding);
            
            // 绘制时间标签
            ctx.textAlign = 'center';
            const dates = ['10/1', '10/5', '10/10', '10/15', '10/20', '10/25', '10/30'];
            const step = chartWidth / (dates.length - 1);
            
            dates.forEach((date, i) => {
                ctx.fillText(date, padding + i * step, height - padding + 20);
            });
            
            // 绘制标题
            ctx.fillStyle = 'var(--text-primary)';
            ctx.font = '14px sans-serif';
            ctx.textAlign = 'left';
            ctx.fillText('AAPL 日K线图', padding, padding - 10);
        }
        
        // 绘制预测图
        function drawPredictionChart() {
            const canvas = document.getElementById('prediction-chart');
            const ctx = canvas.getContext('2d');
            
            // 设置Canvas尺寸
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
            
            const width = canvas.width;
            const height = canvas.height;
            const padding = 30;
            const chartWidth = width - padding * 2;
            const chartHeight = height - padding * 2;
            
            // 清除画布
            ctx.clearRect(0, 0, width, height);
            
            // 绘制背景
            ctx.fillStyle = 'var(--chart-bg)';
            ctx.fillRect(0, 0, width, height);
            
            // 生成历史数据
            const historyData = [];
            let current = 175;
            for (let i = 0; i < 10; i++) {
                current += (Math.random() - 0.3) * 1.5;
                historyData.push(current);
            }
            
            // 生成预测数据
            const forecastData = [];
            let forecastStart = historyData[historyData.length - 1];
            for (let i = 0; i < 5; i++) {
                forecastStart += (Math.random() - 0.1) * 2;
                forecastData.push(forecastStart);
            }
            
            // 找出价格范围
            const allData = [...historyData, ...forecastData];
            let minPrice = Math.min(...allData);
            let maxPrice = Math.max(...allData);
            
            // 添加一些空间
            const priceRange = maxPrice - minPrice;
            minPrice -= priceRange * 0.2;
            maxPrice += priceRange * 0.2;
            
            // 绘制历史线
            ctx.beginPath();
            ctx.strokeStyle = 'var(--primary)';
            ctx.lineWidth = 3;
            
            historyData.forEach((price, i) => {
                const x = padding + i * (chartWidth / (allData.length - 1));
                const y = padding + chartHeight - ((price - minPrice) / (maxPrice - minPrice)) * chartHeight;
                
                if (i === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
            });
            
            ctx.stroke();
            
            // 绘制预测线
            ctx.beginPath();
            ctx.strokeStyle = 'var(--positive)';
            ctx.lineWidth = 3;
            ctx.setLineDash([5, 3]);
            
            // 从最后一个历史点开始
            const lastHistX = padding + (historyData.length - 1) * (chartWidth / (allData.length - 1));
            const lastHistY = padding + chartHeight - ((historyData[historyData.length - 1] - minPrice) / (maxPrice - minPrice)) * chartHeight;
            ctx.moveTo(lastHistX, lastHistY);
            
            forecastData.forEach((price, i) => {
                const idx = historyData.length + i;
                const x = padding + idx * (chartWidth / (allData.length - 1));
                const y = padding + chartHeight - ((price - minPrice) / (maxPrice - minPrice)) * chartHeight;
                
                ctx.lineTo(x, y);
            });
            
            ctx.stroke();
            ctx.setLineDash([]);
            
            // 绘制预测区间
            const upperBand = forecastData.map(p => p + 0.8 + Math.random() * 0.5);
            const lowerBand = forecastData.map(p => p - 0.8 - Math.random() * 0.5);
            
            ctx.fillStyle = 'rgba(16, 185, 129, 0.2)';
            ctx.beginPath();
            
            // 上边界
            upperBand.forEach((price, i) => {
                const idx = historyData.length + i;
                const x = padding + idx * (chartWidth / (allData.length - 1));
                const y = padding + chartHeight - ((price - minPrice) / (maxPrice - minPrice)) * chartHeight;
                
                if (i === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
            });
            
            // 下边界（反向）
            for (let i = lowerBand.length - 1; i >= 0; i--) {
                const idx = historyData.length + i;
                const x = padding + idx * (chartWidth / (allData.length - 1));
                const y = padding + chartHeight - ((lowerBand[i] - minPrice) / (maxPrice - minPrice)) * chartHeight;
                
                ctx.lineTo(x, y);
            }
            
            ctx.closePath();
            ctx.fill();
            
            // 绘制当前点
            ctx.fillStyle = 'var(--primary)';
            ctx.beginPath();
            ctx.arc(lastHistX, lastHistY, 5, 0, Math.PI * 2);
            ctx.fill();
            
            // 绘制标题
            ctx.fillStyle = 'var(--text-primary)';
            ctx.font = '14px sans-serif';
            ctx.textAlign = 'left';
            ctx.fillText('AAPL 价格预测', padding, padding - 10);
            
            // 绘制图例
            ctx.fillStyle = 'var(--primary)';
            ctx.fillRect(width - 150, padding, 10, 10);
            ctx.fillStyle = 'var(--text-primary)';
            ctx.fillText('历史价格', width - 135, padding + 8);
            
            ctx.fillStyle = 'var(--positive)';
            ctx.fillRect(width - 150, padding + 20, 10, 10);
            ctx.fillStyle = 'var(--text-primary)';
            ctx.fillText('预测价格', width - 135, padding + 28);
            
            ctx.fillStyle = 'rgba(16, 185, 129, 0.2)';
            ctx.fillRect(width - 150, padding + 40, 10, 10);
            ctx.fillStyle = 'var(--text-primary)';
            ctx.fillText('置信区间', width - 135, padding + 48);
        }
        
        // 初始化
        function init() {
            generateHeatmapData();
            generateStockCards();
            generateAlerts();
            drawCandlestickChart();
            drawPredictionChart();
            
            // 模拟实时更新
            setInterval(() => {
                // 随机更新一些数据
                if (Math.random() > 0.3) {
                    generateHeatmapData();
                }
                
                if (Math.random() > 0.5) {
                    drawCandlestickChart();
                }
                
                // 每30秒添加一个新预警
                if (Math.random() > 0.9) {
                    const alerts = [
                        { 
                            title: '价格波动预警', 
                            desc: 'TSLA 价格5分钟内波动超过3%', 
                            time: '刚刚',
                            level: 'warning'
                        },
                        { 
                            title: '大宗交易', 
                            desc: '机构投资者以$172.50价格买入500,000股AAPL', 
                            time: '刚刚',
                            level: 'info'
                        },
                        { 
                            title: '板块轮动', 
                            desc: '资金从科技板块流向防御性板块', 
                            time: '刚刚',
                            level: 'info'
                        }
                    ];
                    
                    const alert = alerts[Math.floor(Math.random() * alerts.length)];
                    const container = document.getElementById('alerts-container');
                    
                    const alertEl = document.createElement('div');
                    alertEl.className = `alert-item ${alert.level}`;
                    alertEl.style.animation = 'fadeIn 0.5s ease';
                    
                    alertEl.innerHTML = `
                        <div class="alert-content">
                            <div class="alert-title">${alert.title}</div>
                            <div class="alert-desc">${alert.desc}</div>
                        </div>
                        <div class="alert-time">${alert.time}</div>
                    `;
                    
                    // 添加到顶部
                    container.insertBefore(alertEl, container.firstChild);
                    
                    // 限制最多显示8条
                    if (container.children.length > 8) {
                        container.removeChild(container.lastChild);
                    }
                }
            }, 5000);
        }
        
        // 页面加载完成后初始化
        window.addEventListener('load', init);
        window.addEventListener('resize', () => {
            drawCandlestickChart();
            drawPredictionChart();
        });
    </script>
</body>
</html>